<template>
	<layout>
	<div class="aaaa">
	<h1>项目管理</h1>
	</div>
	<div class="aadd">
		<div></div>
		<div></div>
		<div></div>

	</div>
	<div class="button">
	<el-button type="primary">新增项目</el-button>
	</div>
		<div class="aad">
	
	

	<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="项目编号"
      width="180">
      <template scope="scope">
        <el-icon></el-icon>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="项目名称"
      width="180">
      <template scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag>{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template scope="scope">
        <el-button
          size="small"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

		</div>
	</layout>
</template>

<script>　　　　　
import Layout from './new.vue'
 export default {
 	components: {
 		Layout
 	},
 	data() {
      return {
        tableData: [{
          date: '1',
          name: '唐超',
          address: '湖南汽车工程职业学院八栋533宿舍'
        }, {
          date: '2',
          name: '廖梦诗',
          address: '湖南汽车工程职业学院实训楼二513教室'
        }, {
          date: '3',
          name: '刘振霖',
          address: '湖南汽车工程职业学院一栋'
        }, {
          date: '4',
          name: '唐大超',
          address: '湖南株洲'
        }]
      }
 },
 	 methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }

</script>
<style scoped>
	.aadd{
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    border: 1px solid #dfe6ec;
    font-size: 14px;
    color: #1f2d3d
	}
	.aad{
	padding: 11px 19px;
	font-size: 16px;
	border-radius: 4px

	}
	.button{
	padding: 11px 19px;
	font-size: 16px;
	border-radius: 4px

	}
	.aaaa{
	padding: 11px 19px;
	font-size: 16px;
	border-radius: 4px
	


	}


</style>